<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <com num="18" @click="comClick" class="box" style="color: red"></com>
    </div>
</body>

<template id="com">
    <!-- 父组件给子组件传递系统属性的时候，如果不做接收，会直接透传到组件的根标签上 -->
    <!-- 
        所谓的属性透传，其实就是父组件在使用子组件的时候，给其添加 class style 和 v-on 会
        被直接传递到组件的根标签中进行使用
        组件最好只有一个根标签，如果有多个根标签，父组件传递属性的时候系统无法确定要将内容添加
        在哪个根标签上，我们可以通过设置 v-bind="$attrs" 的方法进行设置
     -->
    <div v-bind="$attrs">
        com 组件 ---- {{ num }}
    </div>
    <!-- <div :="$attrs">
        com 组件2
    </div> -->
</template>

<script>

    const com = {
        template: '#com',
        props: ['num'],
        // 设置 no props 不允许属性透传
        inheritAttrs: false,
        mounted() {
            console.log(this.$attrs);

            // 无法对其进行修改
            // this.$attrs.style = {
            //     border: '1px solid red',
            //     color: 'blue'
            // }
        },
    }

    const app = {
        data() {
            return {}
        },
        methods: {
            comClick() {
                console.log('com  被点击了');
            }
        },
        components: {
            com
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>